<template>
  <div class="equipment">
    <el-card class="box-card c-left">
      <div slot="header" class="clearfix">
        <span>设备概览</span>
        <el-tooltip content="1001010100100" placement="bottom" effect="dark">
          <i class="iconfont icon-askoutline"></i>
        </el-tooltip>
        <el-button style="float: right; padding: 3px 0" type="text"
          >绑定设备</el-button
        >
      </div>

      <div class="shebei">
        <img src="../assets/img/gateway.png" alt="" />
        <div class="line1"></div>
        <div>
          <div class="num">
            {{ deviceObj !== "" ? deviceObj.LoRaWAN.total : "" }}
          </div>
          <span>LoRaWAN</span>
          <div class="text">网关</div>
        </div>
        <div class="line1"></div>
        <div>
          <div class="num">
            {{ deviceObj !== "" ? deviceObj.LoRaPP.total : "" }}
          </div>
          <span>LoRaPP</span>
          <div class="text">网关</div>
        </div>
        <div class="line1"></div>
        <div>
          <div class="num">
            {{ deviceObj !== "" ? deviceObj.group : "" }}
          </div>
          <span></span>
          <div class="text">群组</div>
        </div>
        <div class="line2"></div>
        <div class="s-code">
          <i class="iconfont icon-yalichuanganqi"></i>
          <div class="">
            <div class="num">
              {{ deviceObj !== "" ? deviceObj.sensor.total : "" }}
            </div>
            <div class="text">传感器节点</div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 监控 -->
    <el-card class="box-card c-right">
      <div slot="header" class="clearfix">
        <span>监控</span>
        <el-tooltip content="1001010100100" placement="left" effect="dark">
          <i class="iconfont icon-askoutline"></i>
        </el-tooltip>
      </div>
      <div class="jiankong">
        <div class="j-con">
          <strong>网关离线</strong>
          <span class="lixian">{{ deviceObj.LoRaWAN.total }}</span>
        </div>
        <div class="j-con">
          <strong>节点离线</strong>
          <span class="lixian">{{ deviceObj.sensor.offline }}</span>
        </div>
        <div class="j-con">
          <strong>传感器电量</strong>
          <span class="dianliang">{{ deviceObj.sensor.lowBattery }}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { $deviceCount } from '@/api/index.js'
export default {
  data () {
    return {
      deviceObj: {
        LoRaPP: '',
        LoRaWAN: '',
        group: '',
        sensor: ''
      }
    }
  },
  mounted () {
    $deviceCount().then((res) => {
      this.deviceObj = res.data.data
      console.log(this.deviceObj)
    })
  }
}
</script>

<style scoped lang="less">
.equipment {
  width: 100%;
  // background-color: lightpink;
  display: flex;
  .c-left {
    width: 70%;
    margin-right: 10px;
  }
  .c-right {
    width: 20%;
    flex: 1;
  }

  .shebei {
    display: flex;
    align-items: center;
    justify-content: space-between;
    img {
      width: 50px;
      height: 90px;
    }
    .line1 {
      height: 50px;
      border: solid 1px rgb(219, 219, 219);
    }
    .line2 {
      height: 90px;
      border: solid 1px rgb(219, 219, 219);
    }
    .num {
      font-size: 25px;
      font-weight: bold;
    }
    span {
      display: inline-block;
      height: 25px;
      font-size: 13px;
      font-weight: bold;
    }
    .text {
      font-size: 13px;
      font-weight: bold;
    }
    .s-code {
      width: 22%;
      margin-right: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .icon-yalichuanganqi {
        font-size: 40px;
        transform: rotate(180deg);
        color: rgb(133, 143, 151);
        margin-right: 10px;
      }
    }
  }

  .c-right {
    .jiankong {
      .j-con {
        width: 98%;
        height: 20px;
        display: flex;
        justify-content: space-between;
        padding-bottom: 15px;
        span {
          display: inline-block;
          width: 20%;
          height: 26px;
          border-radius: 13px;
          text-align: center;
          line-height: 26px;
        }
        strong {
          font-size: 15px;
          margin-top: 3px;
        }
        .lixian {
          background-color: rgb(198, 241, 227);
          color: rgb(20, 151, 8);
        }
        .dianliang {
          background-color: rgb(255, 209, 232);
          color: rgb(248, 31, 139);
        }
      }
    }
  }
}
</style>
